<template>
    <div class="timeline-wrap">
        <div class="timeline-item" v-for="item in timelineArr" :key="item[content]">
            <div
                :class="['dot',{'active':item[activeKey] == '1'}]"
                :style="{background:item[activeKey] == '1' ?dotColor:'#A9AEBC'}"
            ></div>
            <div
                class="content"
                :style="{color:item[activeKey] == '1' ?dotColor:'#333'}"
            >{{item[contentKey]}}</div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {};
    },
    props: {
        timelineArr: Array,
        dotColor: {
            type: String,
            default: "#17579f"
        },
        contentKey: {
            type: String,
            default: "content"
        },
        activeKey: {
            type: String,
            default: "status"
        }
    },
    watch: {
        timelineArr: {
            handler: function(newVal) {
                console.log(newVal);
            },
            immediate: true
        }
    }
};
</script>
<style lang="scss">
.timeline-wrap {
    width: 100%;
    display: flex;
    .timeline-item {
        flex-basis: 25%;
        position: relative;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        &::before {
            content: "";
            position: absolute;
            left: 0;
            top: 10px;
            height: 4px;
            width: 50%;
            background: #999999;
            z-index: 0;
        }
        &:first-child::before {
            width: 0;
        }
        &::after {
            content: "";
            position: absolute;
            left: 50%;
            top: 10px;
            height: 4px;
            width: 50%;
            background: #999999;
            z-index: 0;
        }
        &:last-child::after {
            width: 0;
        }
    }
    .dot {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: #ebeef5;
        position: relative;
        z-index: 1;
    }
    .content {
        margin-top: 14px;
        font-size: 16px;
        font-weight: bold;
        color: #333;
    }
}
</style>